<style>
    aside{ overflow:hidden; float:left; width:219px; height:600px; border-right:1px solid #bbb; }
    ul{ margin:20px 20px; }
    ul > li{ margin-bottom:20px; font-size:18px; font-weight:bold; color:#1d3176; letter-spacing:-1px; list-style: none outside none;}
    ul > li:last-child{ margin-top:50px; text-align:right; }
    ul > li > a{ font-weight:bold; font-size:14px; color:#f90; text-decoration: none;}
    ul > li > a:hover{ text-decoration:underline; }

    .adminsection{ display:none; }

    section{  float: right;
    overflow-x: hidden;
    overflow-y: scroll;
    padding: 20px;
    position: relative;
    width: 936px;}
    
    section > img.loader{ position:absolute; top:50%; left:50%; margin-top:-24px; margin-left:-24px; }
    section > h1{ text-transform:uppercase; font-weight:bold; font-size:14px; color:#f90; }
    table{ margin-top:30px; width:100%; }
    table, tr, td, th{ border:1px solid #f90;}
    table > tr{ display:block; float:left; }
    th{ padding:10px 20px;}
    td{ padding:5px 10px; }
    tr > td:last-child{ text-align:center; }
    tr > td > a{ color:#888; }
    tr > td > a:hover{ color:#333; }
    tr > td:first-child > a{ color:#1386e8; }
    tr > td:first-child > a:hover{ color:#1386e8; text-decoration:underline; }
    tr > td > span.on{ font-weight:bold; color:#69d720; }
    tr > td > span.off{ font-weight:bold; color:#f06f51; }
    section form > label{ display:block; margin-bottom:20px; font-size:14px; }
    section form > label > input, section form > label > textarea{ margin-top:5px; border-radius:5px; border:0;  background-color:#e7e7e7; padding:5px 10px; font-size:15px; color:#888; }
    textarea{ width:90%; height:200px; }
    input[type="submit"]{ float:right; background-color:#c7c7c7; cursor:pointer; }
    input[type="submit"]:hover{ background-color:#979797; color:#fff; }
</style>

<script>
    var ant;

    function showPage(page)
    {
        if(page != ant)
        {
            $('#adminDisplay').animate({opacity:0}, 10, function()
            {
                $(this).html('<img class="loader" alt="Cargando" src="../images/loader-3.gif" />');
                $(this).animate({opacity:1});

                $.get(page + '.php', function(r)
                {
                    $('#adminDisplay').animate({opacity:0}, 10, function()
                    {
                        $(this).html(r);
                        $(this).animate({opacity:1});
                    });
                });
            });
        }
    }

    

    function cambiarDisplay(id, value)
    {
        $('#acciones_' + id).animate({opacity:0}, 200, function()
        {
            $(this).html('<img alt="Cargando" src="../images/loader-3.gif" width="16" height="16" />');
            $(this).animate({opacity:1});

            $.getJSON('include/change-property.php', {propiedad_id:id, propiedad_visible:value}, function(r)
            {
                if(r.success)
                {
                    $('#propiedad_' + id).fadeOut();
                }
                else
                {
                    $('#acciones_' + id).html(r.error);
                }
            });
        });
    }

    function cambiarEstado(id, value)
    {
        $('#acciones_' + id).animate({opacity:0}, 200, function()
        {
            $(this).html('<img alt="Cargando" src="../images/loader-3.gif" width="16" height="16" />');
            $(this).animate({opacity:1});

            $.getJSON('include/change-property.php', {propiedad_id:id, propiedad_estado:value}, function(r)
            {
                if(r.success)
                {
                    $('#estado_' + id).html((value == 0) ? '<span class="off">Ocupada</span>' : '<span class="on">Disponible</span>');
                    $('#acciones_' + id).html('<a href="#" onclick="cambiarDisplay(' + id +', 0); return false">Deshabilitar</a> | <a href="#" onclick="cambiarEstado(' + id +', ' + ((value - 1) * -1) + '); return false">Cambiar estado</a>');
                }
                else
                {
                    $('#acciones_' + id).html(r.error);
                }
            });
        });
    }

    function cambiarAgente(propiedad, agente)
    {
        var select = $(agente).parent().html();
        var agente = $(agente).val();

        $('#cambiaragente_' + propiedad).animate({opacity:0}, 200, function()
        {
            $(this).html('<img alt="Cargando" src="../images/loader-3.gif" width="16" height="16" />');
            $(this).animate({opacity:1});

            $.get('include/change-agent.php', {propiedad_id:propiedad, agente_id:agente}, function(r)
            {
                $('#cambiaragente_' + propiedad).html(select);
                $('.propiedad_' + propiedad + '_' + agente).attr('selected','selected');
            });
        });
    }

    $(document).on('ready', function()
    {
        showPage('visible-properties');
    });
</script>

<aside>
    <ul>
        <li><a href="#" onclick="showPage('visible-properties'); return false">Propiedades publicadas</a></li>
        <li><a href="#" onclick="showPage('invisible-properties'); return false">Propiedades en espera</a></li>
        <li><a href="#" onclick="showPage('rechazar'); return false">Propiedades Rechazadas</a></li>
        <li><a href="#" onclick="showPage('agents'); return false">Agentes</a></li>
        <li><a href="logout.php">Salir</a></li>
    </ul>

</aside>

<section id="adminDisplay">

</section>